<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<image :src="brandInfo.info.cover" mode="aspectFill" class="detail-bg"></image>
				<div class="info-box">
					<div class="left-info">
						<image :src="brandInfo.creator.avatar" mode="aspectFill" class="header-img"></image>
						<div class="info-text">
							<span class="jiu-font28-fff" style="margin-bottom: 1.6vw;">{{ brandInfo.creator.name }}</span>
							<!-- <span class="jiu-font24-555">ID：{{ brandInfo.creator.uuid }}</span> -->
						</div>
					</div>
					<span class="guan-btn jiu-font24-000" @tap="onProductBrandFocus" :class="[isFocus == 0 ? 'is' : 'not']">{{ isFocus == 0 ? '关注' : '已关注' }}</span>
				</div>
				<div class="swiper-box">
					<u-swiper :list="brandInfo.info.banner" name="img" border-radius="48" height="228" bg-color="#000" @click="onSwiper"></u-swiper>
				</div>
				<div style="padding: 0 4.27vw;position: relative;">
					<product-card v-for="item in page.list" :item="item"></product-card>
				</div>
				<!-- <div class="img-box" v-else>
					<image src="@/static/img/noProduct.png" mode="aspectFill"
						style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
				</div> -->
			</ma-refresh>
		</ma-body>
	</div>
</template>

<script>
	import productCard from '@/components/product-card/product-card';
	import Refresh from '@/$ma/common/js/refresh.js';
	export default{
		components: {
			productCard
		},
		data(){
			return{
				swiperList: ['/static/img/swiper.jpg'],
				brandInfo: {},
				page: new Refresh(this, {
					apiName: 'getProductBrandSpu',
					id: 0
				}),
				isFocus: 0
			}
		},
		methods: {
			onSwiper(e) {
				// window.location.href = this.swiperList[e].url;
				console.log(this.brandInfo.info.banner[e].url)
				let url = '/'+this.brandInfo.info.banner[e].url;
				uni.navigateTo({
					url: url
				})
			},
			async getProductBrandInfo(id){
				let res = await this.$u.api.getProductBrandInfo({},id);
				this.brandInfo = res;
			},
			async onProductBrandFocus(){
				let id = this.brandInfo.creator.id;
				this.$u.api.onProductBrandFocus({},id).then(res=>{
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					this.getProductBrandIsFocus()
				});
			},
			async getProductBrandIsFocus(){
				let id = this.brandInfo.creator.id;
				let res = await this.$u.api.getProductBrandIsFocus({},id);
				this.isFocus = res.data;
			},
			
		},
		onLoad(e){
			this.getProductBrandInfo(e.id);
			this.page.id = e.id;
			this.$nextTick(async res=>{
				await this.page.onRefresh();
				await this.getProductBrandIsFocus();
			})
		}
	}
</script>

<style lang="scss">
	/deep/.u-swiper-indicator {
		padding: 0 !important;
		left: 6.4vw;
		bottom: 4.27vw !important;
		justify-content: flex-start !important;
	
	}
	
	/deep/.u-indicator-item-round {
		width: 1.07vw;
		height: 1.07vw;
		background-color: #555555;
		border-radius: 50%;
		opacity: 0.6;
	}
	
	/deep/.u-indicator-item-round-active {
		width: 1.07vw;
		height: 1.07vw;
		border-radius: 1.07vw;
		background-color: #FFCE80;
	}
	.detail-bg{
		position: absolute;
		width: 100%;
		height: 45.33vw;
	}
	.info-box{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 34.67vw;
		margin-left: 4.27vw;
		// background-color: #000;
		border-radius: 12.8vw 0 0 12.8vw;
		padding: 3.2vw 4.27vw;
		position: relative;
		
		.left-info{
			display: flex;
			align-items: flex-end;
			.header-img{
				width: 21.33vw;
				height: 21.33vw;
				border-radius: 50%;
				border: 2px solid #000;
			}
			.info-text{
				display: flex;
				flex-direction: column;
				margin-left: 2.13vw;
			}
		}
	
		.guan-btn{
			width: 17.07vw;
			display: flex;
			height: 8.53vw;
			align-items: center;
			justify-content: center;
			// line-height: 8.53vw;
			text-align: center;
			border-radius: 5.33vw;
		}
	}

	.swiper-box{
		margin-top: 4.27vw;
		padding: 0 4.27vw;
		margin-bottom: 1.6vw;
	}
	.is{
		background-color: #A972FF;
	}
	.not{
		background-color: #555555;
		box-shadow: none;
	}
</style>